<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Example</title>
    <link type="text/css" href="/home/thedoink/Desktop/svn/Code/FreeBouting/bouting/static/css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
    <style>
      h1 { text-align: center; font-size: 250%;}
      h2 { border-bottom: 1px solid black; font-size: 200%;}
      body { font-size: 10px; font-family: sans-serif; }
      #wrapper { text-align: center; }
      #content { width: 800px; margin: 0 auto; text-align: left; }
    </style>
    <script src="/home/thedoink/Desktop/svn/Code/FreeBouting/bouting/static/js/jquery-1.5.1.min.js"></script>
    <script src="/home/thedoink/Desktop/svn/Code/FreeBouting/bouting/static/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script>

      // execute this code when document is ready
      $(function() {

        // create a date chooser
        $('#date').datepicker();

        // autocomplete out of an input
        $('#autocomplete').autocomplete( { source: ["Java", "JavaScript", "PHP", "Ruby", "Python", "Perl", "Lua"] } );

        // accordion out of divs
        $("#accordion").accordion();

        // tabs from list and divs
        $("#tabs").tabs();

        // add slider and wire output to another element
        $("#slider-range").slider({
          range: true,
          min: 0,
          max: 100,
          values: [25, 75],
          slide: function(event, ui) {
            $("#amount").html('Range: ' + ui.values[0] + ' - ' + ui.values[1]);
          }
        });
        $("#amount").html('Range: ' + $("#slider-range").slider("values", 0) + ' - '
                          + $("#slider-range").slider("values", 1));


        // dialogs
        $("#dialog").dialog({autoOpen: false});
        $('#dialogbutton').click(
          function() {
            $("#dialog").dialog("open")
          }
        );
 
        $("#modaldialog").dialog({
          autoOpen: false,
          resizable: false,
          height: 140,
          modal: true,
          buttons: {
            'Do it!': function() {
              $(this).dialog('close');
            },
            'Abort': function() {
              $(this).dialog('close');
            }
          }
        });
        $('#modaldialogbutton').click(
          function() {
            $("#modaldialog").dialog("open")
          }
        );
      });

    </script>
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <h1>jQuery UI Demo</h1>

        <h2>Datepicker</h2>
        <p>
          <label for="date">Enter a date:</label>
          <input type="text" id="date" />
        </p>

        <h2>Autocomplete</h2>
        <p>
          <label for="autocomplete">Enter a programming language:</label>
          <input type="text" id="autocomplete" />
        </p>
      
        <h2>Accordion</h2>
        <div id="accordion">
          <h3><a href="#">Section 1</a></h3>
          <div>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget,
            quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida
            in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit
            eros. Nam mi. Proin viverra leo ut odio. Curabitur
            malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </div>
          <h3><a href="#">Section 2</a></h3>
          <div>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit
            amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris
            turpis porttitor velit, faucibus interdum tellus libero ac
            justo. Vivamus non quam. In suscipit faucibus urna.
          </div>
          <h3><a href="#">Section 3</a></h3>
          <div>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
            lobortis.  Phasellus pellentesque purus in massa. Aenean in
            pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac
            felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
            nisi, eu iaculis leo purus venenatis dui.
          </div>
        </div>

        <h2>Tabs</h2>

        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
          </ul>
          <div id="tabs-1">
            Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
            risus. Curabitur nec arcu. Donec sollicitudin mi sit amet
            mauris. Nam elementum quam ullamcorper ante.  Etiam aliquet massa
            et lorem. Mauris dapibus lacus auctor risus. Aenean tempor
            ullamcorper leo. Vivamus sed magna quis ligula eleifend
            adipiscing. Duis orci.  Aliquam sodales tortor vitae
            ipsum. Aliquam nulla. Duis aliquam molestie erat.  Ut et mauris
            vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt
            interdum.  Phasellus ipsum. Nunc tristique tempus lectus.
          </div>
          <div id="tabs-2">
            Morbi tincidunt, dui sit amet facilisis feugiat, odio metus
            gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
            molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
            eros molestie lectus, ut tempus eros massa ut dolor. Aenean
            aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit
            aliquam. Praesent in eros vestibulum mi adipiscing
            adipiscing. Morbi facilisis. Curabitur ornare consequat nunc.
            Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
            volutpat. Pellentesque convallis.  Maecenas feugiat, tellus
            pellentesque pretium posuere, felis lorem euismod felis, eu ornare
            leo nisi vel felis. Mauris consectetur tortor et purus.
          </div>
          <div id="tabs-3">
            Mauris eleifend est et turpis. Duis id erat. Suspendisse
            potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
            rutrum erat, eu congue orci lorem eget lorem.  Vestibulum non
            ante. Class aptent taciti sociosqu ad litora torquent per conubia
            nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel
            enim commodo pellentesque.  Praesent eu risus hendrerit ligula
            tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec,
            luctus a, lacus.
          </div>
        </div> 

        <h2>Sliders</h2>
   
        <p id="amount"> </p>
        <div id="slider-range"></div> 

        <h2>Dialogs</h2>

        <div id="dialog" title="Basic dialog">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          at urna. Aliquam erat volutpat. Class aptent taciti sociosqu ad
          litora torquent per conubia nostra, per inceptos himenaeos.
        </div>
        <p>
          <input type="button" value="Open Dialog" id="dialogbutton" />
        </p>
  
        <div id="modaldialog" title="Launch Missles">
          <span class="ui-icon ui-icon-alert" style="float: left"></span>
          Launch the missiles, please confirm.
        </div>
        <p>
          <input type="button" value="Launch Missiles" id="modaldialogbutton" />
        </p>
      </div>
    </div>
  </body>
</html>